<template>
    <div id="id">
      <router-link to="/aaa">查询天气</router-link>
            <router-link to="/english">每日一句</router-link>
            <router-link to="/wangyiyun">网易云热评</router-link>
            <router-link to="/recipe">菜谱查询</router-link>
            <router-link to="/shenghuo">生活小窍门</router-link>
            <router-link to="/BMITEST">BMI标准体重测试</router-link>
            <hr>
      <button @click="get">每日一句英语</button>
      <p>{{english.content}}</p>
      <p>{{english.note}}</p>
      <img id="img" src="" alt="">
      <p>{{english.date}}</p>
    </div>
</template>

<script>
    export default {
      name: "english",
      data(){
          return{
            english:''
          }
      },
      methods:{
        get:function (){
          let than=this;
          $.ajax({
            type:"GET",
            url:'http://api.tianapi.com/txapi/everyday/index?key=0c53d7b6b6dbbe5c3028d59fa6dbcbbd',
            data:{},
            async:true,   // 异步，默认开启，也就是$.ajax后面的代码是不是跟$.ajx里面的代码一起执行
            cache:true,  // 表示浏览器是否缓存被请求页面,默认是 true
            dataType:"json",
            success:function(data){
              var url=data.newslist[0].imgurl;
              $("#img").attr("src",url);
              console.log(data);
              than.english=data.newslist[0];
            },
            error:function(){
              console.log("发生错误")
              alert("发生错误");
            },
            complete:function(){
              console.log("ajax请求完事，最终操作在这里完成")
            },
          })
        }
      }
    }
</script>

<style scoped>
  #id{
    text-align: center;
  }
img{
  width: 250px;
  height: 300px;
}
</style>
